import App from '@/App.vue'
// 引入自定义指令
import { isHasButton } from '@/directive/hasButton'
import router from '@/router/index'
// 引入仓库
import piniaStore from '@/store'
// 引入全局图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 引入ElementPlus
import ElementPlus from 'element-plus'
// 引入中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { createApp } from 'vue'
import 'element-plus/theme-chalk/el-message-box.css'
import 'element-plus/theme-chalk/el-message.css'
// 引入模板的全局的样式
import '@/styles/index.scss'
// 引入路由守卫
import './permission'
// 引入暗黑模式的样式
import 'element-plus/theme-chalk/dark/css-vars.css'
// 引入 XML 美化样式
import 'pretty-xml-vue3/style.css'

/**
 * 导入 BPMN 相关的样式文件。
 *
 * 该代码块主要用于加载 bpmn-js 和 properties-panel 的 CSS 样式文件，
 * 以确保在使用 bpmn-js 进行流程图渲染时，界面能够正确显示所需的样式。
 *
 * 样式文件说明：
 * - `diagram-js.css`：提供基础的流程图布局和交互样式。
 * - `bpmn.css`：包含 BPMN 图形元素的核心样式。
 * - `bpmn-codes.css`：定义 BPMN 元素的编码相关样式。
 * - `bpmn-embedded.css`：支持嵌入式 BPMN 图形的样式。
 * - `properties-panel.css`：为属性面板提供样式支持。
 */
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import '@bpmn-io/properties-panel/dist/assets/properties-panel.css'

const app = createApp(App)

// 注入路由
app.use(router)

// 注入大仓库
app.use(piniaStore)

// 使用中文语言包
app.use(ElementPlus, { locale: zhCn })

// 注入图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 将 app 传入自定义指令
isHasButton(app)

app.mount('#app')
